<template>
  <Dialog title="图片选择" v-model="dialogVisible" width="1000">
    <div>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="文件名">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入文件名"
            clearable
            />
        </el-form-item>
        <el-form-item>
          <el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" ref="taskTableRef" @select="selectClick">
        <el-table-column type="selection" width="55" />
        <el-table-column label="文件名" prop="name" :show-overflow-tooltip="true" />
        <el-table-column
          label="文件路径"
          align="center"
          prop="path"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
        <el-table-column
          label="文件大小"
          align="center"
          prop="size"
          width="120"
          :formatter="fileSizeFormatter"
        />
        <el-table-column label="文件类型" align="center" prop="type" width="180px" />
        <el-table-column label="文件内容" align="center" prop="url" width="110px">
          <template #default="{ row }">
            <el-image
              v-if="row.type.includes('image')"
              class="h-80px w-80px"
              lazy
              :src="row.url"
              :preview-src-list="[row.url]"
              preview-teleported
              fit="cover"
            />
            <el-link
              v-else-if="row.type.includes('pdf')"
              type="primary"
              :href="row.url"
              :underline="false"
              target="_blank"
              >预览</el-link
            >
            <el-link
              v-else
              type="primary"
              download
              :href="row.url"
              :underline="false"
              target="_blank"
              >下载</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="上传时间"
          align="center"
          prop="createTime"
          width="180"
          :formatter="dateFormatter"
        />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- <el-radio-group v-if="chooseType == 0" v-model="radioChoose">
      <div class="img-box">
        <div class="img-item" v-for="item in list" :key="item.id">
          <el-image
            v-if="item.type.includes('image')"
            class="h-100px w-100px"
            lazy
            :src="item.url"
            :preview-src-list="[item.url]"
            preview-teleported
            fit="cover"
          />
          <el-radio class="img-item-radio" :label="item.url" size="large">{{}}</el-radio>
        </div>
      </div>
    </el-radio-group>
    <el-checkbox-group v-else v-model="checkChoose">
      <div class="img-box">
        <div class="img-item" v-for="item in list" :key="item.id">
          <el-image
            v-if="item.type.includes('image')"
            class="h-100px w-100px"
            lazy
            :src="item.url"
            :preview-src-list="[item.url]"
            preview-teleported
            fit="cover"
          />
          <el-checkbox class="img-item-radio" :label="item.url">{{}}</el-checkbox>
        </div>
      </div>
    </el-checkbox-group> -->

    <template #footer>
      <div style="display: flex; justify-content: space-between">
        <div></div>
        <div style="margin-top: 20px">
          <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as FileApi from '@/api/infra/file'
import { dateFormatter } from '@/utils/formatTime'
import { fileSizeFormatter } from '@/utils'

/** CMS菜单 表单 */
defineOptions({ name: 'ChooseImage' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const chooseType = ref(0) // 0单选 1多选
const radioChoose = ref(null)
const checkChoose = ref([])
const taskTableRef = ref(null)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
  name: undefined
})

/** 打开弹窗 */
const open = async (type) => {
  chooseType.value = type
  dialogVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const getList = async () => {
  const data = await FileApi.getFilePage(queryParams)
  list.value = data.list
  total.value = data.total
}

/** 提交表单 */
const emit = defineEmits(['choose']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  if (chooseType.value == 0) {
    emit('choose', radioChoose.value)
  } else {
    emit('choose', checkChoose.value)
  }
  dialogVisible.value = false
  radioChoose.value = ''
  checkChoose.value = []
}
const selectClick = (selection, row) => {
  if (chooseType.value == 0) {
    radioChoose.value = row.url
    if (selection.length > 1) {
      let del_row = selection.shift()
      taskTableRef.value.toggleRowSelection(del_row, false) // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    }
  } else {
    checkChoose.value = selection.map((item) => item.url)
    console.log(11, checkChoose.value)
  }
}
</script>

<style lang="scss" scoped>
.img-box {
  display: flex;
  flex-wrap: wrap;

  .img-item {
    padding: 10px;
    position: relative;

    .img-item-radio {
      position: absolute;
      bottom: 5px;
      left: 15px;
    }
  }
}
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}
</style>